<template>
  <div
    style="
      width: 801px;
      border: 1px solid #ebeef5;
      border-bottom: none;
      margin-top: 60px;
      padding-top: 40px;
      margin-left: 200px;
    "
  >
    <el-header style="width: 803px; border-bottom: none">
      <el-steps
        :active="active"
        finish-status="success"
        space="25%"
        align-center
        style="width: 800px"
      >
        <el-step title="填写商品信息"></el-step>
        <el-step title="填写商品促销"></el-step>
        <el-step title="填写商品属性"></el-step>
        <el-step title="选择商品关联"></el-step>
      </el-steps>
      <!-- 步骤一 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="left"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
        style="
          border: 1px solid #ebeef5;
          border-top: none;
          width: 801px;
          margin-left: -1px;
        "
        v-show="active == 0"
      >
        <div class="block1">
          <span class="demonstration">商品分类：</span>
          <el-cascader
            v-model="ruleForm.type"
            :options="ruleForm.options"
            :props="SetKesDept"
            size="mini"
            style="margin-left: 20px"
          ></el-cascader>
        </div>
        <el-form-item
          label="商品名称："
          prop="name"
          style="padding-left: 120px"
        >
          <el-input v-model="ruleForm.name" style="width: 448px"></el-input>
        </el-form-item>
        <el-form-item
          label="副标题："
          prop="subTitle"
          style="padding-left: 120px"
        >
          <el-input v-model="ruleForm.subTitle" style="width: 448px"></el-input>
        </el-form-item>
        <el-form-item
          label="商品品牌："
          prop="brandName"
          style="padding-left: 120px"
        >
          <el-select v-model="ruleForm.brandName" placeholder="请选择品牌">
            <el-option
              v-for="item in ruleForm.fenlei"
              :key="item.name"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="商品介绍："
          prop="desc"
          style="padding-left: 120px"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.desc"
            style="width: 448px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品货号："
          prop="productSn"
          style="padding-left: 120px"
        >
          <el-input
            v-model="ruleForm.productSn"
            style="width: 448px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品售价："
          prop="originalPrice"
          style="padding-left: 120px"
        >
          <el-input
            v-model="ruleForm.originalPrice"
            style="width: 448px"
          ></el-input>
        </el-form-item>
        <el-form-item label="市场价：" prop="price" style="padding-left: 120px">
          <el-input v-model="ruleForm.price" style="width: 448px"></el-input>
        </el-form-item>
        <el-form-item
          label="商品库存："
          prop="stock"
          style="padding-left: 120px"
        >
          <el-input v-model="ruleForm.stock" style="width: 448px"></el-input>
        </el-form-item>
        <el-form-item
          label="计量单位："
          prop="unit"
          style="padding-left: 120px"
        >
          <el-input v-model="ruleForm.unit" style="width: 448px"></el-input>
        </el-form-item>
        <el-form-item
          label="商品重量："
          prop="weight"
          style="padding-left: 120px"
        >
          <el-input
            v-model="ruleForm.weight"
            style="width: 448px"
          ></el-input> </el-form-item
        ><el-form-item
          label="排序"
          prop="publishStatus"
          style="padding-left: 120px"
        >
          <el-input
            v-model="ruleForm.publishStatus"
            style="width: 448px"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 160px">
          <el-button
            style="margin-top: 12px"
            @click="submitForm('ruleForm')"
            type="primary"
            >下一步，填写商品促销</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 步骤二 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="right"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
        style="
          border: 1px solid #ebeef5;
          border-top: none;
          width: 801px;
          margin-left: -1px;
        "
        v-show="active == 1"
      >
        <el-form-item
          label="赠送积分："
          prop="giftPoint"
          style="padding-left: 120px"
        >
          <el-input
            v-model="ruleForm.giftPoint"
            style="width: 448px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="赠送成长值："
          prop="giftGrowth"
          style="padding-left: 120px"
        >
          <el-input
            v-model="ruleForm.giftGrowth"
            style="width: 448px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="积分购买限制："
          prop="usePointLimit"
          style="padding-left: 120px"
        >
          <el-input
            v-model="ruleForm.usePointLimit"
            style="width: 448px"
          ></el-input>
        </el-form-item>
        <el-form-item label="预告商品：" style="padding-left: 120px">
          <el-switch v-model="ruleForm.previewStatus" :active-value="0" :inactive-value="1" @change=yugao($event)>
          </el-switch>
        </el-form-item>
        <el-form-item
          label="商品上架："
          prop="publishStatus"
          style="padding-left: 120px"
        >
          <el-switch v-model="ruleForm.publishStatus" :active-value="0" :inactive-value="1" @change=shangjia($event)> </el-switch>
        </el-form-item>
        <el-form-item label="商品推荐：" prop="" style="padding-left: 120px">
          新品<el-switch v-model="flag1" style="margin: 0 10px"></el-switch>
          推荐<el-switch v-model="flag2" style="margin: 0 10px"></el-switch>
        </el-form-item>
        <el-form-item label="服务保证：" style="padding-left: 120px">
          <el-checkbox-group v-model="ruleForm.promotionType">
            <el-checkbox label="无忧退货"></el-checkbox>
            <el-checkbox label="快速退货"></el-checkbox>
            <el-checkbox label="免费包邮"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="详细页标题："
          prop="name"
          style="padding-left: 120px"
        >
          <el-input
            v-model="ruleForm.name"
            style="width: 448px"
          ></el-input> </el-form-item
        ><el-form-item
          label="详细页描述："
          prop="name"
          style="padding-left: 120px"
        >
          <el-input
            v-model="ruleForm.name"
            style="width: 448px"
          ></el-input> </el-form-item
        ><el-form-item
          label="商品关键字："
          prop="name"
          style="padding-left: 120px"
        >
          <el-input v-model="ruleForm.name" style="width: 448px"></el-input>
        </el-form-item>

        <el-form-item
          label="商品备注："
          prop="desc"
          style="padding-left: 120px"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.desc"
            style="width: 448px"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择优惠模式：" style="padding-left: 120px">
          <el-tabs v-model="ruleForm.promotionType" @tab-click="handleClick">
            <el-tab-pane label="无优惠" name="none"></el-tab-pane>
            <el-tab-pane label="特惠促销" name="first">
              <div class="block" style="margin-bottom: 20px">
                <span class="demonstration">开始时间：</span>
                <el-date-picker
                  v-model="ruleForm.promotionStartTime"
                  type="datetime"
                  placeholder="选择开始时间"
                >
                </el-date-picker>
              </div>
              <div class="block" style="margin-bottom: 20px">
                <span class="demonstration">结束时间：</span>
                <el-date-picker
                  v-model="ruleForm.promotionEndTime"
                  type="datetime"
                  placeholder="选择结束时间"
                >
                </el-date-picker>
              </div>
              <el-form-item label="促销价格：" style="margin: 0px" class="inp">
                <el-input
                  v-model="ruleForm.promotionPrice"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="会员价格" name="second">
              <el-form-item
                label="黄金会员："
                style="margin-left: 0; width: 300px"
              >
                <el-input v-model="ruleForm.huangjin"></el-input>
              </el-form-item>
              <el-form-item
                label="白金会员："
                style="margin-left: 0; width: 300px"
              >
                <el-input v-model="ruleForm.baijin"></el-input>
              </el-form-item>
              <el-form-item
                label="钻石会员："
                style="margin-left: 0; width: 300px"
              >
                <el-input v-model="ruleForm.zuanshi"></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="阶梯价格" name="third">
              <el-table
                :data="ruleForm.jieti"
                border=""
                style="width: 382px"
                algin="center"
              >
                <el-table-column prop="shuliang" label="数量" width="120">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.shuliang"
                      style="width: 50px"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="zheko" label="折扣" width="120">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.zheko"
                      style="width: 50px"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                  <a href="javascript:;" style="color: #409eff">删除</a
                  ><a
                    href="javascript:;"
                    style="padding-left: 20px; color: #409eff"
                    >添加</a
                  >
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="满减价格" name="fourth">
              <el-table
                :data="ruleForm.manjian"
                border=""
                style="width: 382px"
                algin="center"
              >
                <el-table-column prop="man" label="满" width="120">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.man"
                      style="width: 50px"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="lijian" label="立减" width="120">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.lijian"
                      style="width: 50px"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                  <a href="javascript:;" style="color: #409eff">删除</a
                  ><a
                    href="javascript:;"
                    style="padding-left: 20px; color: #409eff"
                    >添加</a
                  >
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item style="margin-left: 160px">
          <el-button style="margin-top: 12px" @click="prev" type="primary"
            >上一步，填写商品信息</el-button
          >
          <el-button style="margin-top: 12px" @click="xinzeng" type="primary"
            >下一步，填写商品属性</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 步骤三 -->
      <!-- <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="left"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
        style="
          border: 1px solid #ebeef5;
          border-top: none;
          width: 801px;
          margin-left: -1px;
        "
        v-show="active == 2"
      >
        <el-form-item label="属性类型：" style="padding-left: 120px">
          <el-select v-model="ruleForm.region" placeholder="请选择品牌">
            <el-option label="手机数码-手机通讯" value="3"></el-option>
            <el-option label="服装T恤" value="1"></el-option>
            <el-option label="服装-裤装" value="2"></el-option>
            <el-option label="配件" value="4"></el-option>
            <el-option label="居家" value="5"></el-option>
            <el-option label="洗护" value="6"></el-option>
            <el-option label="测试分类" value="10"></el-option>
            <el-option label="服装鞋帽" value="11"></el-option>
            <el-option label="手机数码-手机通讯" value="14"></el-option>
            <el-option label="服装-T恤12345" value="15"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品规格：" style="padding-left: 120px">
          <el-card
            class="box-card"
            style="width: 550px; background: #f8f9fc"
            shadow="never"
          >
            <div class="text item">
              <div>
                颜色：
                <div>
                  <el-checkbox v-model="ruleForm.gold" style="margin: 0 5px"
                    >金色</el-checkbox
                  ><a href="javascrip:;" style="color: #409eff">删除</a>
                  <el-checkbox v-model="ruleForm.silver" style="margin: 0 5px"
                    >银色</el-checkbox
                  ><a href="javascrip:;" style="color: #409eff">删除</a>
                </div>
                <el-input
                  v-model="ruleForm.input"
                  placeholder="请输入内容"
                  size="small"
                  style="width: 160px"
                ></el-input>
                <el-button size="small" style="margin-left: 10px"
                  >增加</el-button
                >
              </div>
              <div>
                容量：
                <div>
                  <el-checkbox v-model="ruleForm.sixteen" style="margin: 0 5px"
                    >16G</el-checkbox
                  >
                  <el-checkbox
                    v-model="ruleForm.thirtyTwo"
                    style="margin: 0 5px"
                    >32G</el-checkbox
                  >
                  <el-checkbox
                    v-model="ruleForm.sixtyFour"
                    style="margin: 0 5px"
                    >64G</el-checkbox
                  >
                  <el-checkbox
                    v-model="ruleForm.twentyTow"
                    style="margin: 0 5px"
                    >128G</el-checkbox
                  >
                </div>
              </div>
            </div>
          </el-card>
          <el-table
            :data="ruleForm.tableData"
            border
            style="width: 550px; margin-top: 20px"
          >
            <el-table-column prop="color" label="颜色" width="78">
            </el-table-column>
            <el-table-column prop="capacity" label="容量" width="78">
            </el-table-column>
            <el-table-column prop="salesPrice" label="销售价格">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.salesPrice"
                  style="width: 50px"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="inventory" label="商品库存" width="78">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.inventory"
                  style="width: 50px"
                ></el-input>
              </template> </el-table-column
            ><el-table-column prop="lowStock" label="库存预警值" width="78">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.lowStock"
                  style="width: 50px"
                ></el-input>
              </template> </el-table-column
            ><el-table-column prop="serialNumber" label="SKU编号" width="78">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.serialNumber"
                  style="width: 50px"
                ></el-input>
              </template> </el-table-column
            ><el-table-column label="操作" width="78">
              <a href="javascript:;">删除</a>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <el-button type="primary">刷新列表</el-button
            ><el-button type="primary">同步价格</el-button
            ><el-button type="primary">同步库存</el-button>
          </div>
        </el-form-item>
        <el-form-item label="属性图片：" style="padding-left: 120px">
          <el-card
            class="box-card"
            style="width: 550px; background: #f8f9fc"
            shadow="never"
          >
            <el-button type="primary">点击上传</el-button>
            <p>金色:只能上传jpg/png文件，且不超过10MB</p>
            <el-button type="primary">点击上传</el-button>
            <p>银色:只能上传jpg/png文件，且不超过10MB</p>
          </el-card>
        </el-form-item>
        <el-form-item label="商品参数：" style="padding-left: 120px">
          <el-card
            class="box-card"
            style="width: 550px; background: #f8f9fc"
            shadow="never"
          >
            <div style="margin-bottom: 10px">
              屏幕尺寸：<el-input
                v-model="ruleForm.chicun"
                placeholder="请输入内容"
                style="width: 250px"
                size="small"
              ></el-input>
            </div>
            <div style="margin-bottom: 10px; margin-left: 24px">
              网络：
              <el-select
                v-model="ruleForm.wangluo"
                placeholder="请选择网络"
                size="small"
              >
                <el-option label="3G" value="1"></el-option>
                <el-option label="4G" value="2"></el-option>
              </el-select>
            </div>
            <div style="margin-bottom: 10px; margin-left: 24px">
              系统：
              <el-select
                v-model="ruleForm.xitong"
                placeholder="请选择系统"
                size="small"
              >
                <el-option label="IOS" value="1"></el-option>
                <el-option label="Android" value="2"></el-option>
              </el-select>
            </div>
            <div style="margin-bottom: 10px">
              电池容量：<el-input
                v-model="ruleForm.dianchi"
                placeholder="请输入内容"
                style="width: 250px"
                size="small"
              ></el-input>
            </div>
          </el-card>
        </el-form-item>

        <el-form-item label="商品相册：" style="padding-left: 120px">
          <el-card class="box-card" shadow="never">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="ruleForm.dialogVisible">
              <img width="100%" :src="ruleForm.dialogImageUrl" alt="" />
            </el-dialog>
          </el-card>
        </el-form-item>
        <el-form-item label="规格参数：" style="padding-left: 120px">
          <el-tabs
            v-model="ruleForm.activeName"
            type="card"
            @tab-click="handleClick"
            style="margin: 0"
          >
            <el-tab-pane label="电脑端详情" name="first"
              ><quill-editor
                ref="text"
                v-model="ruleForm.content"
                class="myQuillEditor"
                :options="ruleForm.editorOption"
                style="height: 300px"
              />
              <el-button type="primary" @click="submit"
                >上传图片</el-button
              ></el-tab-pane
            >
            <el-tab-pane label="移动端详情" name="second"
              ><quill-editor
                ref="text"
                v-model="ruleForm.content"
                class="myQuillEditor"
                :options="ruleForm.editorOption"
                style="height: 300px"
              />
              <el-button type="primary" @click="submit"
                >上传图片</el-button
              ></el-tab-pane
            >
          </el-tabs>
        </el-form-item>

        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          style="display: none"
        >
          <i class="el-icon-plus avatar-uploader-icon" id="imgInput"></i>
        </el-upload>

        <el-form-item style="margin-left: 160px">
          <el-button style="margin-top: 12px" @click="prev" type="primary"
            >上一步，填写商品促销</el-button
          >
          <el-button
            style="margin-top: 12px"
            @click="submitForm('ruleForm')"
            type="primary"
            >下一步，填写商品关联</el-button
          >
        </el-form-item>
      </el-form> -->
      <!-- 步骤四 -->
      <!-- <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="left"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
        style="
          border: 1px solid #ebeef5;
          border-top: none;
          width: 801px;
          margin-left: -1px;
        "
        v-show="active == 3"
      >
        <div style="width: 80%; margin-left: 15%; padding-top: 20px">
          <el-transfer
            filterable
            :filter-method="ruleForm.filterMethod1"
            filter-placeholder="请输入专题名称"
            v-model="ruleForm.zhuanti"
            :data="ruleForm.data1"
            :titles="['待选择', '已选择']"
          >
          </el-transfer>
        </div>
        <div style="width: 80%; margin-left: 15%; padding-top: 20px">
          <el-transfer
            filterable
            :filter-method="ruleForm.filterMethod"
            filter-placeholder="请输入优选名称"
            v-model="ruleForm.youxuan"
            :data="ruleForm.data"
            :titles="['待选择', '已选择']"
          >
          </el-transfer>
        </div>
        <el-form-item style="margin-left: 160px">
          <el-button style="margin-top: 12px" @click="prev" type="primary"
            >上一步，填写商品属性</el-button
          >
          <el-button style="margin-top: 12px" @click="xinzeng" type="primary"
            >完成，提交商品</el-button
          >
        </el-form-item>
      </el-form> -->
    </el-header>
  </div>
</template>

<script>
import "@/assets/AddProduct.css";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  components: {
    quillEditor,
  },

  data() {
    // 专题
    const generateData = (_) => {
      const data = [];
      const cities = [];
      const pinyin = [];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index],
        });
      });
      return data;
    };
    // 优选
    const generateData1 = (_) => {
      const data1 = [];
      const cities1 = [];
      const pinyin1 = [];
      cities1.forEach((city, index) => {
        data1.push({
          label: city,
          key: index,
          pinyin1: pinyin1[index],
        });
      });
      return data1;
    };
    return {
      SetKesDept: {
        value: "id",
        label: "name",
        children: "children",
      },
      active: 0,
      flag1: true,
      flag2:true,
      value1: "",
      checkList: [],
      activeName: "none",
      // ruleForm: {
      //   promotionType: "",
      //   data1: generateData1(),
      //   zhuanti: [],
      //   filterMethod1(query, item) {
      //     return item.pinyin.indexOf(query) > -1;
      //   },
      //   data: generateData(),
      //   youxuan: [],
      //   filterMethod(query, item) {
      //     return item.pinyin.indexOf(query) > -1;
      //   },
      //   titles: ["待选择", "已选择"],
      //   activeName: "first",
      //   content: "",
      //   editorOption: {},
      //   sixteen: false,
      //   thirtyTwo: true,
      //   input: "",
      //   gold: true,
      //   silver: true,
      //   huangjin: "",
      //   baijin: "",
      //   zuanshi: "",
      //   name: "",
      //   region: "",
      //   date1: "",
      //   date2: "",
      //   delivery: false,
      //   resource: "",
      //   desc: "",
      //   sixtyFour: true,
      //   twentyTwo: false,
      //   value: [],
      //   zhuanti1: [],
      //   youxuan1: [],
      //   options: [
      //     {
      //       name: "",
      //       id: "",
      //       children: [
      //         {
      //           name: "",
      //           id: "",
      //         },
      //       ],
      //     },
      //   ],
      //   tableData: [
      //     {
      //       color: "金色",
      //       capacity: "32G",
      //       salesPrice: 5499,
      //       inventory: 99,
      //       stockWarningvalue: "",
      //       serialNumber: "201808270029001",
      //     },
      //     {
      //       color: "金色",
      //       capacity: "64G",
      //       salesPrice: 6299,
      //       inventory: 100,
      //       stockWarningvalue: "",
      //       serialNumber: "201808270029001",
      //     },
      //     {
      //       color: "银色",
      //       capacity: "32G",
      //       salesPrice: 5499,
      //       inventory: 100,
      //       stockWarningvalue: "",
      //       serialNumber: "201808270029001",
      //     },
      //     {
      //       color: "银色",
      //       capacity: "64G",
      //       salesPrice: 6299,
      //       inventory: 100,
      //       stockWarningvalue: "",
      //       serialNumber: "201808270029001",
      //     },
      //   ],
      //   manjian: [
      //     {
      //       man: 0,
      //       lijian: 0,
      //     },
      //   ],
      //   dialogImageUrl: "",
      //   dialogVisible: false,
      //   jieti: [
      //     {
      //       zheko: 0,
      //       shuliang: 0,
      //     },
      //   ],
      //   canshu: [
      //     {
      //       chicun: 4.7,
      //       dianchi: "1960ml",
      //     },
      //   ],
      //   wangluo: [{}],
      //   xitong: [{}],
      // },
      ruleForm: {
        options: [
          {
            name: "",
            id: "",
            children: [
              {
                name: "",
                id: "",
              },
            ],
          },
        ],
        fenlei: [
          {
            name: "",
            id: "",
          },
        ],
        xitong: [{}],
        albumPics: "",
        brandId: 0,
        brandName: "",
        deleteStatus: 0,
        description: "",
        detailDesc: "",
        detailHtml: "",
        detailMobileHtml: "",
        detailTitle: "",
        feightTemplateId: 0,
        giftGrowth: 0,
        giftPoint: 0,
        id: 0,
        keywords: "",
        lowStock: 0,
        memberPriceList: [
          {
            id: 0,
            memberLevelId: 0,
            memberLevelName: "",
            memberPrice: 0,
            productId: 0,
          },
        ],
        name: "",
        newStatus: 0,
        note: "",
        originalPrice: 0,
        pic: "",
        prefrenceAreaProductRelationList: [
          {
            id: 0,
            prefrenceAreaId: 0,
            productId: 0,
          },
        ],
        previewStatus: 0,
        price: 0,
        productAttributeCategoryId: 0,
        productAttributeValueList: [
          {
            id: 0,
            productAttributeId: 0,
            productId: 0,
            value: false,
          },
        ],
        productCategoryId: 0,
        productCategoryName: "",
        productFullReductionList: [
          {
            fullPrice: 0,
            id: 0,
            productId: 0,
            reducePrice: 0,
          },
        ],
        productLadderList: [
          {
            count: 0,
            discount: 0,
            id: 0,
            price: 0,
            productId: 0,
          },
        ],
        productSn: "",
        promotionEndTime: "2021-03-28T06:30:41.823Z",
        promotionPerLimit: 0,
        promotionPrice: 0,
        promotionStartTime: "2021-03-28T06:30:41.823Z",
        promotionType: 0,
        publishStatus: 0,
        recommandStatus: 0,
        sale: 0,
        serviceIds: "",
        skuStockList: [
          {
            id: 0,
            lockStock: 0,
            lowStock: 0,
            pic: "",
            price: 0,
            productId: 0,
            promotionPrice: 0,
            sale: 0,
            skuCode: "",
            spData: "",
            stock: 0,
          },
        ],
        sort: 0,
        stock: 0,
        subTitle: "",
        subjectProductRelationList: [
          {
            id: 0,
            productId: 0,
            subjectId: 0,
          },
        ],
        unit: "",
        usePointLimit: 0,
        verifyStatus: 0,
        weight: 0,
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur",
          },
        ],
        subTitle: [
          { required: true, message: "请输入副标题", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur",
          },
        ],
        brandName: [
          { required: true, message: "请选择商品品牌", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    xinzeng() {
      this.$axios
        .post("/product/create", this.ruleForm)
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    fenlei() {
      let that = this;
      this.$axios.get("/brand/listAll").then(function (res) {
        console.log(res);
        that.ruleForm.fenlei = res.data.data;
        console.log(that.ruleForm.fenlei);
      });
    },
    // fn() {
    //   let that = this;
    //   this.$axios
    //     .get("/prefrenceArea/listAll")
    //     .then(function (res) {
    //       console.log(res)
    //       that.ruleForm.youxuan1 = res.data.data;
    //       console.log(that.ruleForm.youxuan1);
    //       console.log(that.ruleForm.youxuan1[0].name);
    //     });
    // },
    // fn1() {
    //   let that = this;
    //   this.$axios
    //     .get("/subject/listAll")
    //     .then(function (res) {
    //       console.log(res)
    //       that.ruleForm.zhuanti1 = res.data.data
    //       console.log(that.zhuanti1);
    //     });
    // },
    // 商品分类
    classification() {
      let that = this;
      this.$axios
        .get("/productCategory/list/withChildren")
        .then(function (res) {
          that.ruleForm.options = res.data.data;
          console.log(that.ruleForm.options);
        });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    prev() {
      --this.active;
      if (this.active < 0) this.active = 0;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          this.next();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submit() {
      // console.log(this.$refs.text.value);
    },
    yugao(a){
      this.ruleForm.previewStatus = a
    },
    shangjia(a){
      this.ruleForm.publishStatus = a
    }
  },
  mounted() {
    // this.fn()
    // this.fn1()
    this.fenlei();
    this.classification();
  },
};
</script>